<template>
  <div class="road__right">
    <commonTitle title="臭氧统计分析"></commonTitle>
    <div class="road__count">
      <echartBarReverse
        ref="echartBarReverseRef"
        echartId="echartBarReverse"
        :lineData="data.lineDataReverse"
        :legendShow="false"
      ></echartBarReverse>
    </div>

    <commonTitle title="站点监控信息"></commonTitle>
    <div class="road__pxrs">
      <common-tag
        v-model="data.klwValue"
        placeholder="类型"
        :optionsList="data.klwOptions"
        @change="handleChange"
      >
      </common-tag>
      <echartBar
        ref="echartBarPXRef"
        echartId="echartBar2"
        :lineData="data.lineData"
        :legendShow="false"
      ></echartBar>
    </div>
    <commonTitle title="异常告警统计"></commonTitle>
    <div class="road__jlgl">
      <div class="road__jlgl-header">
        <span style="width: 10%">序号</span>
        <span style="width: 40%">设备</span>
        <span style="width: 40%">状态</span>
      </div>
      <div class="road__jlgl-body" @scroll="scrollEvent">
        <div class="road__jlgl-info" v-for="(item, index) in data.jlglList" :key="index">
          <span style="width: 10%">{{ index + 1 }}</span>
          <span style="width: 42%" class="common-text" :title="item.coach">{{ item.coach }}</span>
          <span style="width: 42%" class="common-text" :title="item.state">{{ item.state }}</span>
          <span style="width: 6%">
            <img :src="yesImage" alt="" v-if="index<2">
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref, nextTick } from 'vue'
import echartBar from './echartBar.vue'
import echartBarReverse from './echartBarReverse.vue'
import icon1 from '@/assets/image/roadTransport/right-icon1.png'
import icon2 from '@/assets/image/roadTransport/right-icon2.png'
import icon3 from '@/assets/image/roadTransport/right-icon3.png'
import * as api from '@/api/roadTransport.js'
import { debounce } from 'lodash'
import yesImage from '@/assets/image/home/yes.png'
const data = reactive({
  searchForm: {
    county: '511300',
    pageNum: 1,
    pageSize: 5
  },
  totalSize: 0,
  value: '货运',
  options: [
    {
      value: '货运',
      label: '货运'
    },
    {
      value: '客车',
      label: '客车'
    }
  ],
  lineDataReverse: {
    xData: ['设备a', '设备b', '设备c', '设备d'],
    hllData: [20, 72, 40, 64]
  },
  lineData: {
    xData: ['站点1', '站点2', '站点3', '站点4', '站点5'],
    hllData: [150, 162, 400, 248, 422]
  },
  avgList: [
    { icon: icon2, value: '0.02月/人', avg: '50%' },
    { icon: icon3, value: '50.28/月', avg: '68%' }
  ],
  avgListPerson: 0,
  klwOptions: [
    {
      value: 'PM2.5',
      label: 'PM2.5'
    },
    {
      value: 'PM10',
      label: 'PM10'
    }
  ],
  klwValue: 'PM2.5',
  jlglList: [
    {
      coach: '颗粒物监管设备-001',
      state: '温度异常'
    },
    {
      coach: '颗粒物监管设备-002',
      state: 'PM2.5超标标...'
    },
    {
      coach: '颗粒物监管设备-003',
      state: 'PM10超标'
    },
    {
      coach: '颗粒物监管设备-004',
      state: '温度异常'
    },
    {
      coach: '颗粒物监管设备-006',
      state: '设备出现异常'
    },
    {
      coach: '颗粒物监管设备-007',
      state: '有人员靠近'
    },
    {
      coach: '颗粒物监管设备-008',
      state: '温度异常'
    }
  ]
})

const getCompletePerson = () => {
  const params = {
    county: '511300'
  }
  api.completePerson(params).then((res) => {
    data.avgListPerson = res.data.person
    data.avgList[0].value = res.data.timePm?.toFixed(2) + '月/人'
    data.avgList[1].value = res.data.timeMP?.toFixed(2) + '/月'
  })
}
const echartBarPXRef = ref('')
const getTrainPerson = () => {
  const params = {
    county: '511300'
  }
  api.trainPerson(params).then((res) => {
    data.lineData.xData = []
    data.lineData.hllData = []
    res.data.forEach((v) => {
      data.lineData.xData.push(v.month + '月')
      data.lineData.hllData.push(v.n)
    })

    nextTick(() => {
      echartBarPXRef.value.drwaEchart()
    })
  })
}

const getCoach = (limitAdd = 0) => {
  data.searchForm.pageSize += limitAdd
  const params = JSON.parse(JSON.stringify(data.searchForm))
  api.coach(params).then((res) => {
    console.log(res)
    data.jlglList = res.rows
    data.totalSize = res.total
  })
}
const getOverviewCB = debounce(getCoach, 500)
/** 滚动事件 */
const scrollEvent = (e) => {
  const { scrollHeight, scrollTop, clientHeight } = e.target
  if (scrollHeight - scrollTop - 25 <= clientHeight) {
    if (data.totalSize <= data.jlglList.length) {
      console.warn('数据已经全部加载完毕')
      return
    }
    // data.bodyLoading = true;
    getOverviewCB(4)
  }
}
const handleChange = () => {
  echartBarPXRef.value.drwaEchart()
}

const echartBarReverseRef = ref()

onMounted(() => {
  echartBarPXRef.value.drwaEchart()
  echartBarReverseRef.value.drwaEchart()
})
</script>

<style lang="less">
.road__right {
  width: 438px;
  margin-right: 44px;
  margin-bottom: 44px;
  pointer-events: auto;
  .road__choose {
    .el-select .el-input__wrapper > input {
      font-size: 16px;
      font-family: 'PingFang SC-中黑体, PingFang SC';
      font-weight: normal;
      color: #cfc8ff !important;
      line-height: 16px;
      text-align: right;
    }
  }
  .road__count {
    display: flex;
    flex-direction: column;
    padding: 8px 0px 8px 16px;
  }
  .road__pxrs {
    display: flex;
    flex-direction: column;
    padding: 8px 0px 8px 16px;
  }
  .road__jlgl {
    padding: 8px 0px 8px 16px;
    .road__jlgl-header {
      display: flex;
      align-items: center;
      height: 42px;
      border-radius: 2px;
      opacity: 1;
      background: rgba(1, 16, 50, 0.6);
      padding: 0px 16px;
      > span {
        display: inline-block;
        font-family: Source Han Sans CN;
        font-size: 16px;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;
        color: #d4e8f8;
        text-align: center;
      }
    }
    .road__jlgl-body {
      overflow: auto;
      height: 210px;
      .road__jlgl-info {
        display: flex;
        align-items: center;
        padding: 0px 16px;
        height: 42px;
        border-radius: 2px;
        opacity: 1;
        background: rgba(14, 70, 116, 0.3);
        > span {
          display: inline-block;
          text-align: center;
          font-family: Source Han Sans CN;
          font-size: 14px;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0em;
          color: #d4e8f8;
        }
        img{
          display: inline-block;
          width: 16px;
          height: 16px;
        }
      }
      .road__jlgl-info:nth-of-type(2n) {
        background: rgba(1, 16, 50, 0.6);
      }
    }
  }
}
</style>
